<template>
    <view  class="businessP">

    <!-- 收益 -->

          <view  class="totle">
                <view class="totle-title" >总收益统计</view>
                <view class="totle-content">
                    <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>累计收益</view>
                    </view>
                    <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>实际收益</view>
                    </view>
                    <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>买入宝总扣款</view>
                    </view>
                </view>
            </view>

            <view>
               <view class="classesifyP">
      <view class="classesify">
        <view :class="selectIfy==1?'classesify-puc':'classesify-pucs' "  @click="pucM" >代理</view>
        <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

        <view class="classesify-bus" @click="busM" v-if="selectIfy === 1">商户</view>
         <view class="classesify-buss"  @click="busM" v-else>商户</view>
      </view>
    </view>
            </view>

            <view  class="allDataP">

          <view class="tabwiperC" >
             
             <u-tabs-swiper
      ref="tabs"
      :list="list"
      active-color="#4dbf92"
      inactive-color=""
      :is-scroll="false"
      :current="current"
      bar-width='80'
      gutter='80'
      @change="tabsChange"
    ></u-tabs-swiper>
          </view>

    <swiper
    :style="{ height: showSwiperLength+'vh'}"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        :style="{ height: '100%' }"
        v-for="(item, index) in comList"
        :key="index"
      >
      
       <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
         <view class="totle-price" >
         <view class="totle-price-text" >
          总交易额：<span>¥898979.00</span>
         </view>

         <view :style="{ display:'flex', justifyContent:'center' ,alignItems:'center' ,backgroundColor:'white', borderRadius:'5px',padding:'0.5rem' }" >
         <img :style="{  width:'1rem' }" src="../../style/image/stati/A33.png" alt="">
         <view :style="{ fontSize:'0.6rem', padding:'0rem 0rem 0rem 0.5rem' }"  >2020-10-10</view>
         </view>

      </view>
      <view  class="seniorityPP" >
      <view class="seniorityP" v-for="(item,index) in showData " :key="index" >
            <view class="seniority-item">
            <view :style="{ display:'flex' }" >
               <view>
               <u-avatar :src="src" mode="circle" :show-sex='true' ></u-avatar>
                </view>
                <view :style="{ padding:'0rem 1rem',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'space-around' }" >
                <view  class="seniority-s" >我的商户名称</view>
                <view class="seniority-p" >{{item}}</view>
                </view>
            
            </view>
                <view class="seniority-price" >¥87678.00</view>
            </view>
      </view>
      </view>
        </scroll-view> 
      </swiper-item>
    </swiper>
            
            </view>

    </view>
    </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  selectIfy: any = 1;

  public list = [
    {
      name: "总数据",
    },
    {
      name: "UC456",
    },
    {
      name: "UC456",
    },
    {
      name: "UC456",
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
  ];
  public comList = ["TotalDataZ", "Income", "Buniness", "Firm"];
  public current = 1; // tabs组件的current值，表示当前活动的tab选项
  public swiperCurrent = 1;

  public showSwiperLength=85

  public showData = ["13612345677", "13612345676","13612345688","13612345677", "13612345676","13612345688","13612345677", "13612345676","1361234511111"];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  busM() {
    //方法中获取this
    this.selectIfy = 2;
  }

  pucM() {
    console.log(12312312);
    this.selectIfy = 1; 
  }

  tabsChange(index: any) {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
    console.log(index);
    this.current = index;
    this.swiperCurrent = index;
  }
  
}
</script>

<style  scoped>


scroll-view ::-webkit-scrollbar {
 width: 0;
    height: 0;
    background-color: transparent;
}
.totle-title {
  padding: 0.8rem;
  text-align: center;
  font-size: 1rem;
  color: white;
}
.totle {
  background: #02b074;
  box-shadow: 0rem 0rem 1rem 0rem rgba(2, 176, 116, 0.3);
  border-radius: 0.4rem;
  margin: 1rem;
}
.totle-content {
  border-bottom-right-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  background-color: white;

  justify-content: space-between;
  display: flex;
  padding: 1rem 0.5rem;
}
.totle-content-item {
  width: 33.3%;
  text-align: center;
}

.totle-content-item :first-child {
  font-size: 0.95rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}

.totle-content-item :nth-child(2) {
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 399;
}

.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
}

.classesify {
  width: 6rem;
  height: 1.8rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.tabwiperC{
margin: 1rem 0rem 0rem 0rem;
border-top: 1px solid #dbdbdb;;
}



.seniority-item{
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 1px solid #dbdbdb;;
 padding: 0.5rem;
}
.seniority-price{
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 399;
color: #000000;
}
.seniority-s{

font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.seniority-p{

font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}
.totle-price{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #f3f5f7;
     padding: 0.3rem 0.5rem;
}
.totle-price-text{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.totle-price-text span{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}
</style>